
<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Converting LatLng to Pixel Coordinates</title> 
 
    <style type="text/css"> 
      #map {
        width: 800px;
        height: 600px;
      }
      
      #latlng-control {
        background: #ffc;
        border: 1px solid #676767;
        font-family: arial, helvetica, sans-serif;
        font-size: 0.7em;
        padding: 2px 4px;
        position: absolute;
      }
    </style> 
 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js??libraries=geometry&sensor=false"></script> 
 	<script type="text/javascript" src="../js/openerror-v1.0.min.js"></script>
    <script type="text/javascript"> 
    var l;
    var p;
    var oe;
    var points = [];
    
    function Points(_lat,_lng,_sd) {
    	this.lat = _lat;
    	this.lng = _lng;
    	this.sd = _sd;
    	this.marker;
    }
    Points.prototype.draw = function() {
    	if(typeof this.marker !== 'undefined') {
    		this.marker.setMap(null);
    	}
    	var offset = oe.Random.boxMuller();
    	var final_offset = offset.scale(this.lat,this.sd,'m');
    	console.log(final_offset);
    	this.marker = new google.maps.Marker({  
  			position: new google.maps.LatLng(this.lat, this.lng),  
  			map: map
		});
    }
      /**
       * LatLngControl class displays the LatLng and pixel coordinates
       * underneath the mouse within a container anchored to it.
       * @param {google.maps.Map} map Map to add custom control to.
       */
      function ErrorControl(map) {
        /**
         * Offset the control container from the mouse by this amount.
         */
        this.ANCHOR_OFFSET_ = new google.maps.Point(8, 8);
        
        /**
         * Pointer to the HTML container.
         */
        this.node_ = this.createHtmlNode_();
        
        // Add control to the map. Position is irrelevant.
        map.controls[google.maps.ControlPosition.TOP].push(this.node_);
        
        // Bind this OverlayView to the map so we can access MapCanvasProjection
        // to convert LatLng to Point coordinates.
        this.setMap(map);
        
        // Register an MVC property to indicate whether this custom control
        // is visible or hidden. Initially hide control until mouse is over map.
        this.set('visible', false);
      }
      
      // Extend OverlayView so we can access MapCanvasProjection.
      ErrorControl.prototype = new google.maps.OverlayView();
      ErrorControl.prototype.draw = function() {};
      
      /**
       * @private
       * Helper function creates the HTML node which is the control container.
       * @return {HTMLDivElement}
       */
      ErrorControl.prototype.createHtmlNode_ = function() {
        var divNode = document.createElement('div');
        divNode.id = 'latlng-control';
        divNode.index = 100;
        return divNode;
      };
      
      /**
       * MVC property's state change handler function to show/hide the
       * control container.
       */
      ErrorControl.prototype.visible_changed = function() {
        this.node_.style.display = this.get('visible') ? '' : 'none';
      };
      
      /**
       * Specified LatLng value is used to calculate pixel coordinates and
       * update the control display. Container is also repositioned.
       * @param {google.maps.LatLng} latLng Position to display
       */
      ErrorControl.prototype.updatePosition = function(latLng) {
        var projection = this.getProjection();
        var point = projection.fromLatLngToContainerPixel(latLng);

        l = [];
        l.push(projection.fromContainerPixelToLatLng(new google.maps.Point(point.x-1, point.y-1)));
        l.push(projection.fromContainerPixelToLatLng(new google.maps.Point(point.x, point.y-1)));
      	l.push(projection.fromContainerPixelToLatLng(new google.maps.Point(point.x+1, point.y-1)));
      	l.push(projection.fromContainerPixelToLatLng(new google.maps.Point(point.x-1, point.y)));
      	l.push(projection.fromContainerPixelToLatLng(new google.maps.Point(point.x, point.y)));
      	l.push(projection.fromContainerPixelToLatLng(new google.maps.Point(point.x+1, point.y)));
      	l.push(projection.fromContainerPixelToLatLng(new google.maps.Point(point.x-1, point.y+1)));
      	l.push(projection.fromContainerPixelToLatLng(new google.maps.Point(point.x, point.y+1)));
      	l.push(projection.fromContainerPixelToLatLng(new google.maps.Point(point.x+1, point.y+1)));

		var max_dist = 0.0;
      	for(var i=0;i<l.length;i++)
      	{
      		var dist_lat = oe.Constants.Sphere.lengthOfDegLat('m') * (l[4].lat()-l[i].lat());
      		var dist_lng = oe.Constants.Sphere.lengthOfDegLon(l[i].lat(), 'm') * (l[4].lng() - l[i].lng());
      		var dist = Math.sqrt( (dist_lat*dist_lat) +  (dist_lng *dist_lng));
      		if(dist > max_dist) {
      			max_dist = dist;
      		}
      	}
      	points.push(new Points(l[4].lat(),l[4].lng(), max_dist));
      	for(var i=0;i<points.length;i++) {
      		points[i].draw();
      	}
      	console.log("max_dist: "+max_dist);
      };
      
      /**
       * Called on the intiial pageload.
       */
       var map;
      function init() {
        var centerLatLng = new google.maps.LatLng(37.64127490249732,-122.21997044824218);
        map = new google.maps.Map(document.getElementById('map'), {
          'zoom': 11,
          'center': centerLatLng,
          'mapTypeId': google.maps.MapTypeId.ROADMAP
        });
        
        // Create new control to display latlng and coordinates under mouse.
        var errorControl = new ErrorControl(map);
        
        // Register event listeners
        google.maps.event.addListener(map, 'click', function(mEvent) {
          errorControl.updatePosition(mEvent.latLng);
        });

        
        oe = new OpenError();
        
      }
      
      // Register an event listener to fire when the page finishes loading.
      google.maps.event.addDomListener(window, 'load', init);
    </script> 
  </head> 
  <body> 
    <h2>Error Collection Custom Control</h2> 
    <div id="map" style="width:500px;height:400px;"></div> 
  </body> 
</html> 